<template>
  <baidu-map class="bm-view" :zoom="12" :center="{lng:114.655716, lat:38.050204}" :scroll-wheel-zoom="true"
             :minZoom="5"
             :maxZoom="20"
             :wheelZoomDelta="0.1"
             :animationDuration="300"
  >
    <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" fillOpacity="1"></bm-navigation>
    <bm-boundary name="石家庄长安区" :strokeWeight="2" strokeColor="blue"></bm-boundary>
    <bml-marker-clusterer :averageCenter="true" :styles="styles">
      <bm-marker v-for="marker of markers" :key="marker" :position="{lng: marker.lng, lat: marker.lat}"
                 @dragend="updateMarker($event, marker)" :dragging="true"></bm-marker>
    </bml-marker-clusterer>
  </baidu-map>
</template>
<script setup>
import { ref } from 'vue';


const markers = ref([]);
const styles = ref([]);
const customStyles = ref(false);


const addMarker = () => {
  const position = { lng: 114.655716, lat: 38.050204 };
  markers.value.push(position);
  for (let i = 0; i < 10; i++) {
    const position = { lng: Math.random() / 15 + 114.655716, lat: Math.random() / 15 + 38.050204 };
    markers.value.push(position);
  }
};

const updateMarker = ({ point }, marker) => {
  marker.lng = point.lng;
  marker.lat = point.lat;
};
const removeMarker = () => {
  markers.value.pop();
};
const changeStyles = () => {
  customStyles.value = !customStyles.value;
  const EXAMPLE_URL = 'http://api.map.baidu.com/library/MarkerClusterer/1.2/examples/';
  const stylesArr = [{
    url: EXAMPLE_URL + 'images/heart30.png',
    size: {
      width: 30,
      height: 26
    },
    opt_anchor: [16, 0],
    textColor: '#ff00ff',
    opt_textSize: 10
  }, {
    url: EXAMPLE_URL + 'images/heart40.png',
    size: {
      width: 40,
      height: 35
    },
    opt_anchor: [40, 35],
    textColor: '#ff0000',
    opt_textSize: 12
  }, {
    url: EXAMPLE_URL + 'images/heart50.png',
    size: {
      width: 50,
      height: 44
    },
    opt_anchor: [32, 0],
    textColor: 'white',
    opt_textSize: 14
  }];
  styles.value = customStyles.value ? stylesArr : [];
};

const getMarkers = () => {
  const position = { lng: 114.655716, lat: 38.050204 };
  markers.value.push(position);
  for (let i = 0; i < 10; i++) {
    const position = { lng: Math.random() / 15 + 114.655716, lat: Math.random() / 15 + 38.050204 };
    markers.value.push(position);
  }
};


getMarkers();
</script>
<style>
.bm-view {
  width: 100%;
  height: 1000px;
}
</style>
